/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Dimensions,
  Platform,
  Button
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { ResponsiveProvider } from './src/components/ResponsiveProvider';
import { wp, hp, sp } from './src/utils/layout';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/screens/HomeScreen';
import MessageScreen from './src/screens/MessageScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import CommonPage from './src/screens/CommonPage';
import PhoneLoginScreen from './src/screens/PhoneLoginScreen';
import AccountLoginScreen from './src/screens/AccountLoginScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import ForgotPasswordScreen from './src/screens/ForgotPasswordScreen';
import Deep from './src/screens/Deep';
import Ceshi from './src/screens/Ceshi';
import { HealthScreen } from './src/screens/HealthScreen';
import HealthReportScreen from './src/wn/HealthReportScreen';
import Ke from './src/screens/Ke';
import { useNavigation } from '@react-navigation/native';
import MapContainer from './src/lzw/MapContainer';
import ActivateScreen from './src/screens/ActivateScreen';
import AlipayWebView from './src/screens/AlipayWebView';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { RootStackParamList, MainTabsParamList, HomeStackParamList, CommonStackParamList } from './src/navigation/types';

const Tab = createBottomTabNavigator<MainTabsParamList>();
const Stack = createNativeStackNavigator<RootStackParamList>();
const HomeStackNavigator = createNativeStackNavigator<HomeStackParamList>();
const CommonStackNavigator = createNativeStackNavigator<CommonStackParamList>();
import { useEffect } from 'react';
// 获取屏幕宽高

// 定义 HomeScreenWithButton 组件
const HomeScreenWithButton = () => {
  const navigation = useNavigation<any>();
  return (
    <>
      <HomeScreen />
      <View style={{
        position: 'absolute',
        top: 50,
        right: 20,
        zIndex: 1000,
        padding: 10,
        borderRadius: 5,
      }}>
        <Button
      
      
          title="查看附近医院"
          color="blue"
          onPress={() => {
            // @ts-ignore
            navigation.navigate('MapContainer');
          }}
        />
      </View>
    </>
  );
};

// 创建 HomeStack
function HomeStack() {
  return (
    <HomeStackNavigator.Navigator>
      <HomeStackNavigator.Screen
        name="Home"
        component={HomeScreenWithButton}
        options={{
          headerShown: false
        }}
      />
      <HomeStackNavigator.Screen
        name="MessageScreen"
        component={MessageScreen}
        options={{
          headerShown: false
        }}
      />
      <HomeStackNavigator.Screen
        name="Deep"
        component={Deep}
        options={{
          headerShown: false
        }}
      />
      <HomeStackNavigator.Screen
        name="Ceshi"
        component={Ceshi}
        options={{
          headerShown: false
        }}
      />
      <HomeStackNavigator.Screen
        name="Health"
        component={HealthScreen}
        options={{
          headerShown: false
        }}
      />
      <HomeStackNavigator.Screen
        name="HealthReportScreen"
        component={HealthReportScreen}
        options={{
          headerShown: false
        }}
      />
      <HomeStackNavigator.Screen
        name="MapContainer"
        component={MapContainer}
        options={{
          headerShown: false
        }}
      />
      

    </HomeStackNavigator.Navigator>
  );
}

function CommonStack() {
  return (
    <CommonStackNavigator.Navigator>
      <CommonStackNavigator.Screen
        name="CommonPage"
        component={CommonPage}
        options={{
          headerShown: false
        }}
      />
      <CommonStackNavigator.Screen
        name="Ke"
        component={Ke}
        options={{
          headerShown: false
        }}
      />
    </CommonStackNavigator.Navigator>
  );
}

// 创建主标签页导航
function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveBackgroundColor: '#fff',
        tabBarInactiveBackgroundColor: '#fff',
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: 'gray',
        tabBarLabelStyle: {
          fontSize: sp(12),
          marginBottom: Platform.OS === 'ios' ? hp(5) : hp(2),
        },
        tabBarStyle: {
          backgroundColor: '#fff',
          borderTopWidth: 0.5,
          height: Platform.OS === 'ios' ? hp(80) : hp(60),
          paddingTop: Platform.OS === 'ios' ? hp(5) : 0,
          elevation: 0,
          shadowOpacity: 0,
        },
        tabBarIconStyle: {
          marginTop: Platform.OS === 'ios' ? hp(5) : hp(2),
        },
        headerShown: false,
      }}
    >
      <Tab.Screen
        name="HomeStack"
        component={HomeStack}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({ color, size }) => (
            <Icon name="home" size={sp(24)} color={color} />
          )
        }}
      />
      <Tab.Screen
        name="Message"
        component={ProfileScreen}
        options={{
          tabBarLabel: '消息',
          tabBarIcon: ({ color, size }) => (
            <Icon name="mail" size={sp(24)} color={color} />
          )
        }}
      />
      <Tab.Screen
        name="Common"
        component={CommonStack}
        options={{
          tabBarLabel: '聊天',
          tabBarIcon: ({ color, size }) => (
            <Icon name="chat" size={sp(24)} color={color} />
          )
        }}
      />
      <Tab.Screen
        name="Profile"
        component={MessageScreen}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({ color, size }) => (
            <Icon name="person" size={sp(24)} color={color} />
          )
        }}
      />
    </Tab.Navigator>
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <ResponsiveProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="AccountLogin" screenOptions={{ headerShown: false }}>
          <Stack.Screen name="MainTabs" component={MainTabs} />
          <Stack.Screen name="AccountLogin" component={AccountLoginScreen} />
          <Stack.Screen name="PhoneLogin" component={PhoneLoginScreen} />
          <Stack.Screen name="Register" component={RegisterScreen} />
          <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
          <Stack.Screen name="Activate" component={ActivateScreen} />
          <Stack.Screen name="AlipayWebView" component={AlipayWebView} />
        </Stack.Navigator>
      </NavigationContainer>
    </ResponsiveProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    height: hp(60),
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  headerText: {
    fontSize: sp(18),
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
  },
  sizeInfo: {
    fontSize: sp(16),
    textAlign: 'center',
    marginVertical: hp(16),
  },
  footer: {
    height: hp(48),
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  footerText: {
    fontSize: sp(14),
    color: '#666',
  },
});

export default App;